<?php

use yii\helpers\Html;

?>
<!DOCTYPE html>
<html style="height: 100%; font-size: 10px;" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="viewport" content="initial-scale=1,user-scalable=no">
    <link rel="icon" href="http://app.mengzhuly.info/personal/favicon.ico">
    <link rel="apple-touch-icon" href="http://app.mengzhuly.info/personal/apple-touch-icon.png">
    <title>萌猪乐园</title>
    <style type="text/css">body, ul, li {
            padding: 0;
            margin: 0
        }

        li {
            list-style: none
        }

        #beecloud-pay {
            width: 100%;
            height: 100%;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.pay-list-bg.png?8) repeat;
            position: fixed;
            left: 0;
            top: 0;
            text-align: center;
            z-index: 9998;
            display: none
        }

        #beecloud-pay.open {
            display: block
        }

        #beecloud-pay-list {
            width: 280px;
            margin: 0 auto;
            padding: 30px 20px 20px;
            position: fixed;
            background-color: #fff;
            text-align: center;
            box-shadow: 0 0 8px #999;
            z-index: 9999
        }

        .beecloud-pay-btn {
            width: 100%;
            height: 45px;
            background-color: #f1f1f1;
            margin: 5px 0;
            cursor: pointer;
            font-size: 18px;
            font-family: "Microsoft YaHei";
            display: inline-block;
            line-height: 45px;
            text-align: center;
            font-weight: 700
        }

        .beecloud-pay-btn span {
            display: inline-block;
            text-align: center;
            width: 124px;
            vertical-align: middle
        }

        .beecloud-pay-close {
            width: 30px;
            height: 30px;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.close3.png?8) center no-repeat;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer
        }

        .beecloud-pay-btn.channel-un i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-un i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-unwap i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-unwap i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-ali i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-ali i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-wxmp i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-wxmp i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcwxmp i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcwxmp i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-wx i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-wx i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcwx i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcwx i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-wxwap i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-wxwap i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcwxwap i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcwxwap i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-jd i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.jd.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-jd i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.jd.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bd i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.bd.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bd i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.bd.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-yee i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.yb.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-yee i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.yb.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-kuaiqian i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.kq.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-kuaiqian i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.kq.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bckj i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bckj i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcaliqr i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcaliqr i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcali i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcali i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
                background-size: contain
            }
        }

        #beecloud-pay .beecloud-wx {
            padding: 35px;
            width: 250px;
            height: 250px;
            margin: 0 auto;
            background-color: #fff;
            position: relative
        }

        #beecloud-pay-loading {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            border-radius: 8px;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.loading.gif?8) center no-repeat;
            background-size: 30px 30px
        }

        @media (max-width: 450px) {
            #beecloud-pay-list {
                width: 100%;
                box-shadow: none;
                padding: 15px 0;
                position: fixed;
                left: 0;
                bottom: 0;
                -webkit-animation: payListMove .5s ease-in-out 0s alternate
            }

            @-webkit-keyframes payListMove {
                0% {
                    bottom: -500px
                }
                100% {
                    bottom: 0
                }
            }.beecloud-pay-btn {
                 width: 90%;
                 height: 40px;
                 line-height: 40px;
                 font-size: 18px
             }

            .beecloud-pay-close {
                display: none
            }
        }</style>
    <script>if (document.documentElement.clientWidth > 600) {
            document.documentElement.style.fontSize = 6000 / 375 + 'px'
        } else {
            document.documentElement.style.fontSize = document.documentElement.clientWidth * 10 / 375 + 'px'
        }</script>

    <?= Html::jsFile('@web/static/js/jquery-3.5.1.min.js') ?>
    <?= Html::cssFile('@web/static/site/app.css') ?>
    <?= Html::cssFile('@web/static/site/chunk-vendors.css') ?>
    <?= Html::cssFile('@web/static/site/app.css') ?>
    <?= Html::cssFile('@web/static/site/chunk-c2656c18.css') ?>
    <?= Html::jsFile('@web/static/site/chunk-c2656c18.js') ?>
    <?= Html::jsFile('@web/static/site/chunk-vendors.js') ?>

</head>
<body style="margin: 0 auto; padding: 0; font-size: 1.3rem; width:37.5rem; height: 100%;font-family: 微软雅黑">
<noscript><strong>We're sorry but huzhu_vue_app doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong></noscript>
<div id="app"><!---->
    <div data-v-9cc1e82a="" id="view">
        <div data-v-9cc1e82a="" class="views">
            <div data-v-7e494792="" data-v-9cc1e82a="" class="goodsInfo">
                <div data-v-7e494792="" class="van-pull-refresh">
                    <div class="van-pull-refresh__track" style="transition-duration: 0ms;">
                        <div class="van-pull-refresh__head"></div>
                        <div data-v-7e494792="" class="goodsInfo-wrap">
                            <div data-v-7e494792="" class="goods-wrap">
                                <div data-v-7e494792="" class="tongzhi"><img data-v-7e494792=""
                                                                             src=""
                                                                             alt="" width="20px">
                                    <div data-v-7e494792="" class="swipeCss van-swipe">
                                        <div class="van-swipe__track van-swipe__track--vertical"
                                             style="height: 40px; transition-duration: 500ms; transform: translateY(-40px);">
                                            <a href="<?= \yii\helpers\Url::toRoute('site/detail-article?id=1')?>" data-v-7e494792="" class="van-swipe-item"
                                                 style="color:black;height: 20px; transform: translateY(40px);">
                                                <div data-v-7e494792="" class="swipeTitle">萌猪乐园试运营通知</div>
                                            </a>
                                            <a href="<?= \yii\helpers\Url::toRoute('site/detail-article?id=1')?>" data-v-7e494792="" class="van-swipe-item" style="height: 20px;">
                                                <div data-v-7e494792="" class="swipeTitle">萌猪乐园试运营通知</div>
                                            </a>
                                        </div>
                                    </div>
                                    <div data-v-7e494792="">
                                        更多
                                    </div>
                                </div>
                                <?php foreach ($Product as $item): ?>
                                    <div data-v-7e494792="" class="goods-item-wrap">
                                        <div data-v-7e494792="" class="pink-dot top-left"></div>
                                        <div data-v-7e494792="" class="pink-dot top-right"></div>
                                        <div data-v-7e494792="" class="pink-dot top-btmleft"></div>
                                        <div data-v-7e494792="" class="pink-dot top-btmright"></div>
                                        <div data-v-7e494792="" class="goods-item">
                                            <div data-v-7e494792="" class="left-img-wrap"><img data-v-7e494792=""
                                                                                               src="<?= $item['img_url'] ?>"
                                                                                               alt=""></div>
                                            <div data-v-7e494792="" class="middle-info">
                                                <div data-v-7e494792="" class="pig-name"><?= $item['name'] ?></div>
                                                <div data-v-7e494792="" class="middle-wrap">
                                                    <div data-v-7e494792="" class="pop-name-wrap">
                                                        <div data-v-7e494792="" class="prop-name">领养时间</div>
                                                    </div>
                                                    <span data-v-7e494792="">：<?= $item['adoption_start_date'] . "-" . $item['adoption_end_date'] ?></span>
                                                </div>
                                                <div data-v-7e494792="" class="middle-wrap">
                                                    <div data-v-7e494792="" class="pop-name-wrap">
                                                        <div data-v-7e494792="" class="prop-name">收益</div>
                                                    </div>
                                                    <span data-v-7e494792="">：<?= $item['days'] ?>天/<?= $item['earnings'] ?>%</span>
                                                </div>
                                                <div data-v-7e494792="" class="middle-wrap">
                                                    <div data-v-7e494792="" class="pop-name-wrap">
                                                        <div data-v-7e494792="" class="prop-name">价值</div>
                                                    </div>
                                                    <span data-v-7e494792="">：<?= $item['min_num'] ?>-<?= $item['max_num'] ?></span>
                                                </div>
                                                <div data-v-7e494792="" class="middle-wrap">
                                                    <div data-v-7e494792="" class="pop-name-wrap">
                                                        <div data-v-7e494792="" class="prop-name">消耗活力值</div>
                                                    </div>
                                                    <span data-v-7e494792="">：<?= $item['energy'] ?>/<?= $item['un_app_energy'] ?></span>
                                                </div>
                                            </div>
                                            <?php if ($item['is_app'] == 1): ?>
                                                <?php if (date("H:i") > $item['adoption_start_date']): ?>
                                                    <div data-v-7e494792="" class="product right-btn making"
                                                         ex-data="<?= $item['id'] ?>">
                                                        生产中
                                                    </div>
                                                <?php elseif (date("H:i") >= $item['adoption_start_date'] && date("H:i") <= $item['adoption_end_date']): ?>
                                                    <div data-v-7e494792="" class="right-btn adopt"
                                                         ex-data="<?= $item['id'] ?>">
                                                        立即领养
                                                    </div>
                                                <?php else: ?>
                                                    <div data-v-7e494792="" class="right-btn making"
                                                         ex-data="<?= $item['id'] ?>">
                                                        已预约
                                                    </div>
                                                <?php endif; ?>
                                            <?php else: ?>
                                                <?php if (date("H:i") > '00:00' && date("H:i") < $item['adoption_start_date']): ?>
                                                    <div data-v-7e494792="" class="appoint right-btn making"
                                                         ex-data="<?= $item['id'] ?>">
                                                        立即预约
                                                    </div>
                                                <?php elseif (date("H:i") >= $item['adoption_start_date'] && date("H:i") <= $item['adoption_end_date']): ?>
                                                    <div data-v-7e494792="" class="right-btn adopt"
                                                         ex-data="<?= $item['id'] ?>">
                                                        立即领养
                                                    </div>
                                                <?php else: ?>
                                                    <div data-v-7e494792="" class="product right-btn making"
                                                         ex-data="<?= $item['id'] ?>">
                                                        生产中
                                                    </div>
                                                <?php endif; ?>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div data-v-9cc1e82a="" class="theBottom">
            <div data-v-58d8e937="" data-v-9cc1e82a="" class="tab-bar">
                <a href="" style="color:black;text-decoration: none" data-v-58d8e937="" class="tab-item"><img data-v-58d8e937=""
                                                              src=""
                                                              alt="" class=" active-img"><span
                            data-v-58d8e937="">首页</span></a>
                <a href="<?= \yii\helpers\Url::toRoute('site/task') ?>" data-v-58d8e937="" class="tab-item"
                   style="color:black">
                    <img data-v-58d8e937=""
                         src=""
                         alt="" class=""><span
                            data-v-58d8e937="">任务</span>
                </a>
                <a href="<?= \yii\helpers\Url::toRoute('site/my-data') ?>" style="color:black" data-v-58d8e937=""
                   class="tab-item"><img
                            data-v-58d8e937=""
                            src=""
                            alt="" class=""><span data-v-58d8e937="">个人中心</span></a>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(document).on('click', '.product', function () {
        alert('生产中，请耐心等待');
    });

    //领养
    $(document).on('click', '.adopt', function () {
        var id = $(this).attr('ex-data');
        if (confirm('确定立即领养吗?')) {
            $.post("<?= \yii\helpers\Url::toRoute('site/adopted-product')?>", {
                _csrf: "<?= Yii::$app->request->csrfToken?>",
                id: id
            }, function (data) {
                if (data.code == 200) {
                    alert(data.msg);
                    location.href = '';
                } else {
                    alert(data.msg);
                }
            });
        }
    });


    //预约
    $(document).on('click', '.appoint', function (e) {
        var id = $(this).attr('ex-data');
        if(confirm('确定立即预约吗？')){
            $.post("<?= \yii\helpers\Url::toRoute('site/appoint-product')?>", {
                _csrf: "<?= Yii::$app->request->csrfToken?>",
                id: id
            }, function (data) {
                if (data.code == 200) {
                    alert(data.msg);
                    location.href = '';
                } else {
                    alert(data.msg);
                }
            });
        }
    })
</script>
</html>